<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <style>
        td {
            width: 160px;
            height: 120px;
            border: 1px;
            text-align: center;
            line-height: 60px;
        }

        select {
            width: 140px;
            height: 30px;
        }

        button {
            width: 45px;
            height: 25px;
        }

        .cz {
            width: 280px;
            height: 25px;
            margin-right: 5px;
        }

        .gg {
            width: 70px;
            height: 25px;
        }   

        img {
            width: 160px;
            height: 100px;
        }

        .add {
            width: 400px;   
            height: 500px;
            background-color: white;
            border: 1px black solid;
            border-radius: 10%;
            position: fixed;
            top: 100px;
            left: 550px;
        }

        .add input{
            width: 200px;
            height: 30px;
            margin-top: 30px;
            margin-left: 100px;
        }

        .add button {
            width: 150px;
            height: 40px;
            margin-top: 30px;
            margin-left: 120px;
            background-color: black;
            color: gold;
            border-radius: 5%;
        }
        .xiu {
            width: 400px;
            height: 500px;
            background-color: white;
            border: 1px black solid;
            border-radius: 10%;
            position: fixed;
            top: 100px;
            left: 550px;
        }

        
        .xiu input{
            width: 200px;
            height: 30px;
            margin-top: 30px;
            margin-left: 100px;
        }

        .xiu button {
            width: 150px;
            height: 40px;
            margin-top: 30px;
            margin-left: 120px;
            background-color: black;
            color: gold;
            border-radius: 5%;
        }

        button {
            background-color: white;
            border: none;
            color: black;
            border-radius: 15%;
        }

        .a {
            background-color: #fafafa;
            border: none;
            color: #16b777;
            font-size: 16px;
        }

        .cha {
            width: 180px;
            height: 40px;
            border: none;
            background-color: #fafafa;
        }
        select {
            border: none;
            background-color: #fafafa;
        }

        .aaa {
            width: 40px;
            height: 60px;
            line-height: 60px;
            display: inline-block;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">后台商品管理</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="aaa" onclick="fy1()">1</li>
                <li class="aaa" onclick="fy2()">2</li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block" onclick="g()">
                    <a href="javascript:;">
                        <img src="../微信图片_20250311115554.png" class="layui-nav-img">
                        个人主页
                    </a>
                </li>

            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航）  -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">商品列表</a>
                    </li>
                    <li class="layui-nav-item" onclick="jia()"><a href="javascript:;">添加商品</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">图表</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="zz()">柱状图</a></dd>
                            <dd><a href="javascript:;" onclick="bz()">饼状图</a></dd>
                            <dd><a href="javascript:;" onclick="dz()">点状图</a></dd>
                            <dd><a href="javascript:;" onclick="zx()">折线图</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">
                    &emsp;&emsp;&emsp;&emsp;<input type="text" class="cha" placeholder="&nbsp;请输入您想查询的商品名称">
                    &emsp;<button onclick="zhao()" class="a">查找</button>
                    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                    <select>
                        <option>选择一个排序字段</option>
                        <option>价格</option>
                        <option>库存</option>
                        <option>已售</option>
                    </select>
                    &emsp;
                    <select>
                        <option>选择一个排序方式</option>
                        <option>从大到小</option>
                        <option>从小到大</option>
                    </select>
                    &emsp;<button onclick="sort()" class="a">排序</button>
                </blockquote>
                <div class="layui-card layui-panel">
                    <div class="layui-card-body">
                        <div class="add">
                            <input type="text" placeholder="&nbsp;请输入商品名"><br>
                            <input type="text" placeholder="&nbsp;请输入库存"><br>
                            <input type="text" placeholder="&nbsp;请输入价格"><br>
                            <input type="text" placeholder="&nbsp;请输入状态"><br>
                            <input type="text" placeholder="&nbsp;请输入已售"><br>
                            <input type="text" placeholder="&nbsp;请输入图片地址"><br>
                            <button onclick="add()">添加</button>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>商品名</td>
                                    <td>库存</td>
                                    <td>价格</td>
                                    <td>状态</td>
                                    <td>已售</td>
                                    <td>图片</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="xiu">
                            <input type="text" placeholder="&nbsp;请输入商品名"><br>
                            <input type="text" placeholder="&nbsp;请输入库存"><br>
                            <input type="text" placeholder="&nbsp;请输入价格"><br>
                            <input type="text" placeholder="&nbsp;请输入状态"><br>
                            <input type="text" placeholder="&nbsp;请输入已售"><br>
                            <input type="text" placeholder="&nbsp;请输入图片地址"><br>
                            <button onclick="xiugai()">修改</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="./首页.js"></script>
</body>

</html>